<template>
	<view class="mains">
		<view class="list">
			<view class="item" v-for="(item,index) in courseList" :key="index" @click="toDetail(item)">
				<view class="left">
					<image :src="item.files || item.courseimage" mode=""></image>
					<!-- 	<view class="tip">
						视频课
					</view> -->
				</view>
				<view class="right">
					<view class="title">
						{{item.fullname}}
					</view>
					<view class="islearning" v-if="islearning">
						<view class="progress">
							已学习{{item.progress}}%
						</view>
						<view class="line">
							<view class="line-act" :style="{width:item.progress+'%'}">

							</view>
						</view>
					</view>
					<view class="islearnHistory" v-else-if="islearnHistory">
						购买时间: <text>{{farmDate(item.startdate)}}</text>
					</view>
					<view class="bottom" v-else>
						<view class="price">
							{{item.fee==0?"免费":"¥" + item.fee}}
						</view>
						<view class="nums">
							<image src="../../static/image/mine.png" mode=""></image>
							<text>{{item.view}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "courseList",
		props: {
			courseList: {
				type: Array,
				default: () => []
			},
			islearning: {
				type: Boolean,
				default: () => false
			},
			islearnHistory: {
				type: Boolean,
				default: () => false
			}

		},
		data() {
			return {

			};
		},
		methods: {
			toDetail(item) {
				uni.navigateTo({
					url: "/pages/courseIntroduce/courseIntroduce?id=" + item.id + "&view=" + item.view +
						'&isJoin=' + item.isJoin + "&canSelf=" + item.canSelf
				})
			},
			farmDate(time) {
				let value = time * 1000
				let data = new Date(value);
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month >= 10 ? month : "0" + month;
				day = day >= 10 ? day : "0" + day;
				h = h >= 10 ? h : "0" + h;
				mm = mm >= 10 ? mm : "0" + mm;
				s = s >= 10 ? s : "0" + s;
				return `${year}-${month}-${day} ${h}:${mm}:${s}`;

				// return new Date(time*1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");÷÷
			}
		}
	}
</script>

<style lang="scss" main>
	.mains {
		.list {
			.item {
				margin: 32rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 150rpx;

				.left {
					width: 216rpx;
					height: 132rpx;
					position: relative;
					border-radius: 12rpx;
					overflow: hidden;

					image {
						width: 216rpx;
						height: 132rpx;

					}

					.tip {
						position: absolute;
						left: 0;
						top: 0;
						width: 76rpx;
						height: 32rpx;
						background-color: rgba(0, 0, 0, 0.3);
						border-radius: 0px 0px 8rpx 0px;
						font-size: 20rpx;
						text-align: center;
						line-height: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}
				}

				.right {
					margin-left: 32rpx;
					flex: 1;

					.title {
						width: 100%;
						font-size: 28rpx;
						font-weight: 400;
						color: #0F1826;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						margin: 14rpx 0;
					}

					.bottom {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.price {
							font-size: 28rpx;
							font-family: PingFang TC-Medium, PingFang TC;
							font-weight: 500;
							color: #FF464E;
						}

						.nums {
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 24rpx;
								height: 24rpx;
								margin-right: 6rpx;
							}

							text {
								font-size: 24rpx;
								font-weight: 400;
								color: #6E7580;
							}
						}

					}

					.islearning {
						.progress {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #0F1826;
						}

						.line {
							width: 100%;
							height: 8rpx;
							background: #EBEDF0;
							border-radius: 30rpx;

							.line-act {
								width: 30%;
								height: 100%;
								background-color: #4DBEC1;
								border-radius: 30rpx;
							}
						}
					}

					.islearnHistory {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #6E7580;
						line-height: 36rpx;
					}
				}
			}
		}
	}
</style>
